<template>
  <div class="form-view-row form-sparepart-view">
    <label>{{ field.displayName }}</label>
    <div class="form-view-row-content">
      <!-- start 子表单表格 -->
      <el-table
        v-if="columns.length"
        :data="subformFieldsValues"
        header-row-class-name="common-list-table-header__v2"
        border
      >
        <el-table-column type="index" width="50" :label="$t('common.base.SN')" />
        <el-table-column
          v-for="(column, index) in columns"
          :key="`${column.field}_${index}`"
          :label="column.displayName"
          :min-width="column.minWidth || '108px'"
          show-overflow-tooltip
        >
          <template slot-scope="scope">
            <template>
              {{
                $formatFormField(column, scope.row)
              }}
            </template>
          </template>
        </el-table-column>
      </el-table>
      <!-- end 子表单表格 -->
    </div>
  </div>
</template>

<script>
/* service */
export default {
  name: 'form-sub-materials-view',
  props: {
    field: {
      type: Object,
      default: () => ({}),
    },
    value: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    columns() {
      return this.field?.subFormFieldList || [];
    },
    subformFieldsValues() {
      return this.value;
    },
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.form-sparepart-view {
  align-items: flex-start;
}
</style>

